let App = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    btnText: '暂停',
    flag: true,
    pauseShow: 'none',
    hideShow: '显示',
    pauseTime: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // return;
    this.ctx = wx.createCanvasContext('clockCanvas')
    this.drawClock()
    var that = this
    this.interval = setInterval(function () {
      that.drawClock()
    }, 1000)
  },
  showAndPause: function () {
    if (this.data.flag) {
      clearInterval(this.interval)
      this.setData({
        btnText: '开始',
        flag: !this.data.flag,
        pauseTime: this.data.h + "时" + this.data.m + "分"
      })
    } else {
      var that = this
      this.interval = setInterval(function () {
        that.drawClock()
      }, 1000)
      this.setData({
        btnText: '暂停',
        flag: !this.data.flag,
        pauseShow: 'none'
      })
    }
  },
  showPauseTime: function () {
    var that=this
    if(that.data.pauseTime==''){
      App.showError('请暂停后查看');
      return false;
    }
    wx.showModal({
      title: '提示',
      placeholderText: '请输入密码查看',
      editable: true,
      success: function (res) {
        
        if (res.confirm && !that.data.flag&&res.content=='123') {
          that.setData({
            pauseShow: 'block'
          })
        }
      }
    });


  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.interval)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /**
   * 绘制时钟
   */
  drawClock: function () {
    /**
     * 准备工作
     */
    let width = 300,
      height = 300

    var ctx = this.ctx
    ctx.translate(width / 2, height / 2)
    ctx.rotate(-Math.PI / 2)

    /**
     * 绘制时钟刻度
     */
    ctx.lineWidth = 6
    ctx.lineCap = 'round'
    for (let i = 0; i < 12; i++) {
      ctx.beginPath()
      ctx.moveTo(80, 0)
      ctx.lineTo(100, 0)
      ctx.stroke()
      ctx.rotate(Math.PI / 6)

    }

    //设置刻度
    ctx.setFontSize(20);
    ctx.fillStyle = '#000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    var R = 60;
    var hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

    hours.forEach(function (hour, i) {
      var rad = (2 * Math.PI / 12) * i;
      var x = R * Math.cos(rad);
      var y = R * Math.sin(rad);
      if (hour == 12) {
        var strWidth = ctx.measureText(hour).width

        ctx.save();
        ctx.translate(x + strWidth / 2, x - strWidth / 2);
        ctx.rotate(90 * Math.PI / 180);
        ctx.fillText(hour, x - 110, y + 12);
        ctx.restore();
      } else if (hour == 6) {
        var strWidth = ctx.measureText(hour).width

        ctx.save();
        ctx.translate(x + strWidth / 2, x - strWidth / 2);
        ctx.rotate(90 * Math.PI / 180);
        ctx.fillText(hour, x + 124, y + 4);
        ctx.restore();
      } else if (hour == 3) {
        var strWidth = ctx.measureText(hour).width

        ctx.save();
        ctx.translate(x + strWidth / 2, x - strWidth / 2);
        ctx.rotate(90 * Math.PI / 180);
        ctx.fillText(hour, x + 72, y - 52);
        ctx.restore();
      } else if (hour == 9) {
        var strWidth = ctx.measureText(hour).width

        ctx.save();
        ctx.translate(x + strWidth / 2, x - strWidth / 2);
        ctx.rotate(90 * Math.PI / 180);
        ctx.fillText(hour, x - 60, y + 68);
        ctx.restore();
      } else {
        //ctx.fillText(hour, x - 6, y + 6);
      }
    })



    ctx.lineWidth = 5
    ctx.lineCap = 'round'
    for (let i = 0; i < 60; i++) {
      ctx.beginPath()
      ctx.moveTo(88, 0)
      ctx.lineTo(100, 0)
      ctx.stroke()
      ctx.rotate(Math.PI / 30)
    }


    /**
     * 获取按当前时间
     */
    let time = this.getTime()
    let h = time[0]
    let m = time[1]
    let s = time[2]

    /**
     * 绘制时钟指针
     */
    ctx.save()
    ctx.rotate(h * Math.PI / 6 + m * Math.PI / 360 + s * Math.PI / 21600)
    ctx.lineWidth = 6
    ctx.beginPath()
    ctx.moveTo(-20, 0)
    ctx.lineTo(60, 0)
    ctx.stroke()
    ctx.restore()
    /**
     * 绘制时钟分针
     */
    ctx.save()
    ctx.rotate(m * Math.PI / 30 + s * Math.PI / 1800)
    ctx.lineWidth = 4
    ctx.beginPath()
    ctx.moveTo(-20, 0)
    ctx.lineTo(82, 0)
    ctx.stroke()
    ctx.restore()
    /**
     * 绘制时钟妙针
     */
    ctx.save()
    ctx.rotate(s * Math.PI / 30)
    ctx.strokeStyle = 'red'
    ctx.lineWidth = 3
    ctx.beginPath()
    ctx.moveTo(-30, 0)
    ctx.lineTo(90, 0)
    ctx.stroke()

    ctx.fillStyle = 'red'
    ctx.beginPath()
    ctx.arc(0, 0, 10, 0, Math.PI * 2, true)
    ctx.fill()
    ctx.restore()


    /**
     * 绘制
     */
    ctx.draw()

    /**
     * 更新页面显示时间
     */

    this.setData({
      h: h > 9 ? h : '0' + h,
      m: m > 9 ? m : '0' + m,
      s: s > 9 ? s : '0' + s
     
    })
    
  },
  getTime: function () {
    let now = new Date()
    let time = []
    time[0] = now.getHours()
    time[1] = now.getMinutes()
    time[2] = now.getSeconds()

    // if (time[0] > 12) {
    //   time[0] -= 12
    // }

    return time
  },

})